<template>
  <div class="register-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="注册"
      class="register-header"
      :border="false"
      left-text="返回"
      @click-left="handleBack"
    />

    <!-- 注册表单区域 -->
    <div class="register-form-wrapper">
      <!-- 注册表单 -->
      <van-form class="register-form">
        <!-- 用户名输入框 -->
        <van-field
          v-model="username"
          name="username"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }, { min: 3, max: 20, message: '用户名长度应在3-20位之间' }]"
          class="form-item"
        >
          <template #left-icon>
            <van-icon name="user" class="input-icon" />
          </template>
        </van-field>

        <!-- 手机号输入框 -->
        <van-field
          v-model="phone"
          name="phone"
          placeholder="请输入手机号"
          type="tel"
          :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
          class="form-item"
        >
          <template #left-icon>
            <van-icon name="phone" class="input-icon" />
          </template>
        </van-field>

        <!-- 密码输入框 -->
        <van-field
          v-model="password"
          type="password"
          name="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }, { min: 6, max: 20, message: '密码长度应在6-20位之间' }]"
          class="form-item"
          :show-password="showPassword"
        >
          <template #left-icon>
            <van-icon name="lock" class="input-icon" />
          </template>
          <template #right-icon>
            <van-icon
              :name="showPassword ? 'eye-o' : 'closed-eye'"
              class="input-icon"
              @click="togglePasswordVisibility"
            />
          </template>
        </van-field>

        <!-- 确认密码输入框 -->
        <van-field
          v-model="confirmPassword"
          type="password"
          name="confirmPassword"
          placeholder="请确认密码"
          :rules="[
            { required: true, message: '请确认密码' },
            {
              validator: (val) => {
                return val === password.value;
              },
              message: '两次输入的密码不一致'
            }
          ]"
          class="form-item"
        >
          <template #left-icon>
            <van-icon name="lock" class="input-icon" />
          </template>
        </van-field>

        <!-- 性别选择 -->
        <van-field
          name="gender"
          label="性别"
          :rules="[{ required: true, message: '请选择性别' }]"
          class="form-item"
        >
          <template #input>
            <van-radio-group v-model="gender">
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
              <van-radio name="other">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>

          <van-field
                  v-model="dateText"
                  label="出生日期"
                  placeholder="点击选择出生日期"
                  readonly
                  @click="showPicker = true"
                  style="padding: 20px"
          />

          <!-- 日期选择弹窗 -->
          <van-popup v-model:show="showPicker" position="bottom" round>
              <van-date-picker
                      type="date"
                      title="选择出生日期"
                      :min-date="new Date('2000-01-01')"
                      :max-date="new Date()"
                      @confirm="handleConfirm"
                      @cancel="handleCancel"
              />
          </van-popup>

        <!-- 邮箱输入框 -->
        <van-field
          v-model="email"
          name="email"
          placeholder="请输入邮箱（选填）"
          type="email"
          :rules="[{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱地址' }]"
          class="form-item"
        >
          <template #left-icon>
            <van-icon name="mail" class="input-icon" />
          </template>
        </van-field>

        <!-- 注册按钮 -->
        <van-button
          type="primary"
          class="register-button"
          @click="handleRegister"
        >
          注册
        </van-button>

        <!-- 登录链接 -->
        <div class="login-link">
          已有账号? <router-link to="/login">立即登录</router-link>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {showToast} from "vant";
import axios from "@/utils/axios.js";
const router = useRouter();

// 表单数据
const username = ref('');
const phone = ref('');
const password = ref('');
const confirmPassword = ref('');
const gender = ref('other');
const email = ref('');
const showPassword = ref(false);


// 日期选择相关数据
const showPicker = ref(false);
const dateText = ref('');

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

// 确认选择日期
// 确认选择日期
const handleConfirm = (date) => {
    console.log(date)
    showPicker.value = false;
    const year = date.selectedValues[0];
    const month = date.selectedValues[1] ;
    const day = date.selectedValues[2];
    // 使用更兼容的方式格式化日期
    dateText.value = year + "-" + month + "-" + day
};

// 取消选择日期
const handleCancel = () => {
    showPicker.value = false;
};

// 在组件挂载时初始化
onMounted(() => {
  // 初始状态不设置日期
});

// 返回上一页
const handleBack = () => {
  router.back();
};

// 注册方法
const handleRegister = () => {
  const registerData = {
    username: username.value,
    phone: phone.value,
    gender: gender.value,
    birthday: dateText.value,
    email: email.value || '',
    encryptedPassword: password.value
  };

  console.log('注册数据:', registerData);
  // 实际项目中应实现注册请求逻辑
    const url ="api/users/userAdd"
    axios.post(url,registerData)
        .then(res=>{
            router.push("/login")
        })
};

</script>

<style lang="less" scoped>
.register-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.register-header {
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.register-form-wrapper {
  flex: 1;
  padding: 24px;
}

.register-form {
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 20px;
}

.input-icon {
  color: #999;
}

.register-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 24px;
  margin-top: 10px;
}

.login-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.login-link a {
  color: #1989fa;
  text-decoration: none;
}

// 日期选择器样式调整
:deep(.van-date-picker__header-title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.van-radio-group) {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}

:deep(.van-radio__label) {
  font-size: 14px;
}

// 日期选择器样式
:deep(.van-date-picker) {
  .van-picker {
    height: 300px;
  }

  .van-picker-column {
    height: 200px !important;
    font-size: 16px;
  }

  .van-picker-item {
    height: 40px !important;
    line-height: 40px !important;
  }
}
</style>